<template>
  <div>
    <section class="top-logo">
      <img src="./../../assets/images/logo.png" class="top-logo-png">
      <span class="top-msg1 fzac-buling">愿不再回头</span>
      <span class="top-msg2 fzac-buling">往后不将就</span>
      <div  id="addlistbox">
        <van-icon name="add" color="#0000001f" size="2.5rem" class="add" @click="toggleShow"></van-icon>
        <section class="add-list" v-show="show">
          <ul>
            <li>
              <van-icon name="todo-list" size="1.1rem"/>
              <span class="add-list-title">写文章</span></li>
            <li>
              <van-icon name="comment" size="1.1rem"/>
              <span class="add-list-title">提问题</span></li>
            <li>
              <van-icon name="friends" size="1.1rem"/>
              <span class="add-list-title">加好友</span></li>
          </ul>
        </section>
      </div>

    </section>

  </div>
</template>
<script>
  export default {
    name: 'FzacHead',
    data() {
      return {
        show: false,//点击右侧上拉菜单是否显示
      }
    },
    methods: {
      toggleShow: function () {
        this.show = !this.show;
      }

    },
    mounted(){
      document.addEventListener('click',(e)=> {
        var btn = document.getElementById("addlistbox");
        if(btn){
          if(!btn.contains(e.target)){
            this.show = false;
          }
        }
      })
    }
  }

</script>
<style lang="scss">
  @import '../../assets/scss/base';
</style>
